/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from "react";
import { Row, Col, Button, Tabs, Icon, Modal } from "antd";
import Diy from "./components/Advertisements/Diy";
import Mini from "./components/Advertisements/Mini";

/**
 * 广告位设置
 *  */
const Advertisement = ({ goBack = () => {} }) => {
  const [activeKey, setActiveKey] = useState("diy");

  const handleTabChange = key => {
    setActiveKey(key);
  };

  const onMiniInfoClick = () => {
    Modal.info({
      width: 700,
      title: "温馨提示",
      content: (
        <>
          <p>1、开通条件：小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。</p>
          <p>温馨提示：如满足条件仍无法开通，可能是数据同步问题，建议等待1-2个工作日后再试。</p>
          <p>2、申请方法：进入微信公众平台小程序后台，点击左侧面板“流量主”，满足开通门槛的小程序开发者点击“开通”，提交财务资料，待审核通过后成功开通流量主功能，即可创建相应的广告位。</p>
          <p>3、banner广告在预约取件页、订单提交页、订单详情页、物流详情页、驿站主页广告位置与自定义小程序广告位置不可同时存在，二选一</p>
          <p>4、插屏广告与福利广告同一页面不可同时出现</p>
          <p>5、当前支持banner广告、插屏广告、封面广告、福利广告</p>
          <p>6、封面广告可自主在小程序后台开启即可，无需配置</p>
        </>
      ),
    });
  };

  return (
    <div>
      <Tabs
        type="card"
        activeKey={activeKey}
        onChange={handleTabChange}
        tabBarExtraContent={
          activeKey == "mini" ? (
            <a style={{ fontWeight: "bold", color: "#ff6600" }} onClick={onMiniInfoClick}>
              {" "}
              <Icon type="question-circle" /> 设置小程序流量主须知
            </a>
          ) : null
        }
      >
        <Tabs.TabPane tab="自定义广告位" key="diy">
          <Diy activeKey={activeKey} />
        </Tabs.TabPane>
        <Tabs.TabPane tab="小程序流量主" key="mini">
          <Mini activeKey={activeKey} />
        </Tabs.TabPane>
      </Tabs>
      <Row type="flex" justify="end" style={{ marginTop: 30 }}>
        <Col>
          <Button type="primary" onClick={goBack}>
            返回
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Advertisement;
